<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px">
      <el-form-item label="任务编号" prop="code">
        <el-input v-model="queryParams.code" clearable></el-input>
      </el-form-item>
      <el-form-item label="任务名称" prop="name">
        <el-input v-model="queryParams.name" clearable></el-input>
      </el-form-item>
      <el-form-item label="评估对象" prop="evaluationObject">
        <el-select v-model="queryParams.evaluationObject" clearable>
          <el-option v-for="item in evaluationObject" :key="item" :value="item.value" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地震输入方式" prop="inputMethod">
        <el-select v-model="queryParams.inputMethod" clearable>
          <el-option v-for="item in inputMethods" :key="item" :value="item.value" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label=" ">
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button @click="resetQuery" plain>重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="Plus" @click="newTask">新建</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" ref="tableRef" :data="dataList" stripe>
      <!-- <el-table-column label="序号" type="index" align="center" width="55" /> -->
      <el-table-column label="任务编号" prop="code" align="center" />
      <el-table-column label="任务名称" prop="name" align="center" />
      <el-table-column label="评估对象" prop="evaluationObject" align="center" />
      <el-table-column label="地震输入方式" prop="inputMethod" align="center" width="150" />
      <el-table-column label="创建人" prop="userName" align="center" width="200" />
      <el-table-column label="操作" align="center" width="200">
        <template #default="{ row }">
          <el-button type="text" @click="updateTask(row.id)">修改</el-button>
          <el-button type="text" @click="deleteTask(row)">删除</el-button>
          <el-button type="text" @click="currentTask(row)" v-if="row.currentTask == 0">设为当前任务</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination style="margin-top: 15px" v-show="queryParams.total > 0" :total="queryParams.total"
      v-model:page="queryParams.page" v-model:limit="queryParams.rows" @pagination="getList" ref="pagination" />

    <NewTask v-model:open="open" :id="formId" @updateList="getList" />
  </div>
</template>
<script setup name="lifeline-taskManage">
import { getPage, deleteById, currentTaskById } from '@/api/lifelineProject/taskManage.js'
import NewTask from '@/views/lifelineProject/taskManage/components/newTask.vue'
import { evaluationObject, inputMethods } from '@/views/lifelineProject'

const props = defineProps({
  open: Boolean,
  url: String,
  type: String
})
const emits = defineEmits(['update:open'])
const { proxy } = getCurrentInstance()

const queryParams = ref({
  page: 1,
  rows: 10,
  total: 0
})
const loading = ref(false)
const dataList = ref([])
// 查询
const getList = () => {
  loading.value = true
  getPage(queryParams.value).then(res => {
    loading.value = false
    dataList.value = res.data?.rows || []
    queryParams.value.total = res.data?.total || 0
  }).catch(() => {
    loading.value = false
  })
}
const handleQuery = () => {
  getList()
}
// 重置
const resetQuery = () => {
  proxy.resetForm('queryRef')
  queryParams.value.page = 1
  handleQuery()
}
// 新建
const open = ref(false)
const newTask = () => {
  open.value = true
  formId.value = ''
}
// 修改
const formId = ref('')
const updateTask = (id) => {
  open.value = true
  formId.value = id
}
// 删除
const deleteTask = row => {
  const { id, name } = row
  proxy.$modal.confirm(`是否确认删除任务【${name}】？`).then(function () {
    return deleteById(id)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("删除成功！");
  }).catch(() => {})
}
// 设为当前任务
const currentTask = row => {
  const { id, name } = row
  proxy.$modal.confirm(`是否确认将【${name}】设为当前任务？`).then(function () {
    return currentTaskById(id)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("设为当前任务成功！");
  }).catch(() => {})
}
onMounted(() => {
  getList()
})
</script>